<template>
    <div style="height: 100%;width: 100%">
        <div style="height:10%;">

            <el-card class="input-card">
                <el-input
                        class="queryInput"
                        placeholder="请输入查询标题内容"
                        prefix-icon="el-icon-search"
                        @blur="queryByCondition"
                        v-model="queryTitleLike">
                </el-input>
<!--                根据标签查询博客-->
                <el-select
                        class="queryInput"
                        v-model="queryLabelId"
                        collapse-tags
                        @change="queryByCondition"
                        placeholder="请选择查询标签">
                    <el-option
                            v-for="label in allLabelOptions"
                            :key="label.value"
                            :label="label.label"
                            :value="label.value">
                    </el-option>
                </el-select>
            </el-card>

        </div>

        <!--                所有的博客展示界面-->
        <div style="height: 80%;min-height: 654px;">
            <el-row     style="height: 100%;width: 100%">
                <el-col :span="6"  v-for="blog in allBlogs" :key="blog.id" style="height: 30%">
                    <el-card class="blog-card"  >
                        <div slot="header"  style="display: flex;justify-content: start;align-items: start;">
                            <el-button type="text" @click="toBlogView(blog.id)">{{blog.title}}<i class="el-icon-view el-icon--right"></i></el-button>
<!--                            标签-->
                            <div class="labelLayout" >
                                <div v-for="(label,index) in blog.labels" :key="label.id" style=" display: inline-block;">
                                    <el-tag v-if="index==0"  class="myTag" @click="queryBlog(label)">
                                        {{label.content}}
                                    </el-tag>
                                    <el-tag v-else-if="index==1" type="success" class="myTag"  @click="toShowAllLabelsDialog(blog)">
                                        <span >...</span>
                                    </el-tag>
                                    <el-tag v-else  style="display: none" ></el-tag>
                                </div>
                            </div>
                        </div>
                        <div class="twoLine" style="height: 78px;">
                            {{blog.content}}
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <!--            下方的分页部分-->
        <div style="height: 10%;background: #0aaeb3;margin-top: 10px">
            <el-card class="page-card">
                <el-pagination
                        @size-change="changePageSize"
                        @current-change="changePageIndex"
                        :page-sizes="[4 , 8 , 12]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalBlogNum">
                </el-pagination>
            </el-card>
        </div>

        <!--        标签展示框-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="60%"
                @close="dialogBlogLabels=[]"
                :modal-append-to-body="false"
                :show-close="false"
                center>
            <template slot="title">

                <el-row style="width: 100%">
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                    <!--                    标题显示-->
                    <el-col :span="8" style="text-align: center;font-size: 20px">
                        <span>{{dialogTitle}}</span>
                    </el-col>
                    <!--                    右上角按钮-->
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                </el-row>

            </template>

            <!--            查看所有标签-->
            <div v-if="dialogTitle=='查看所有标签'">

                <el-card class="box-card" style="margin-bottom: 10px">
                    <el-table
                            :data="dialogBlogLabels"
                            style="width: 100%;margin-bottom: 20px;min-height: 400px;"
                            row-key="id"
                            height="400">
                        <el-table-column
                                prop="content"
                                label="内容">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="发布时间"
                                sortable>
                            <template slot-scope="scope">
                                {{scope.row.createTime | dateFormatFun(2)}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="info" @click="queryBlog(scope.row),dialogVisible = false">查询</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

                <div>
                    <el-card class="box-card" style="text-align: center">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </el-card>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: "BlogView",
        data(){
            return{
                allBlogs:{},  //所有的博客信息
                pageIndex:1,    //当前页序号
                pageSize:12,    //当前页面大小
                queryTitleLike:"",  //根据title模糊查询
                totalBlogNum:0,     //总的博客数目
                dialogVisible: false,           //新增博客弹出框是否展示
                dialogBlogLabels:[],            //查看所有标签的对话框的label数组
                allLabelOptions:[],              //所有的标签选项（增加了0：默认全部查询）
                allLabels: [],                 //所有的标签
                queryLabelId:"",          //按照labelId查询
                dialogTitle:"",         //弹出框的标题
            }
        },
        created() {

            this.queryAllLabels();

        },
        mounted() {

        },
        methods:{
            //根据标签查询博客
            queryBlog(label){
                this.queryLabelId=label.id;
                this.queryAllBlogs();
            },
            //查询所有的标签信息
            queryAllLabels(){
                this.request.get("/index/label/queryAllLabels",{
                    params:{}
                }).then(res=>{
                    if (res.code=="200"){
                        this.allLabels=res.data.map(v=>({value:v.id,label:v.content}));
                        this.allLabelOptions=this.allLabels;
                        this.allLabelOptions.unshift({value:0,label:'默认'});
                        this.moreThanLineHide(3);
                        this.queryLabelId=isNaN(Number(this.$route.query.queryLabelId)) ? "" : Number(this.$route.query.queryLabelId);
                        this.queryAllBlogs();
                    }else if(res.code=="301"){
                        this.allLabels=[];
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //js实现超过3行即省略功能
            moreThanLineHide(maxLine){
                this.$nextTick(()=>{

                    let contents=document.getElementsByClassName('twoLine');
                    contents=Array.from(contents);	//	content类似数组，但不是数组
                    let maxHeight;
                    if (contents.length>0 && contents!=null){
                        maxHeight = window.getComputedStyle(contents[0]).getPropertyValue('line-height').slice(0,-2)*maxLine;
                    }
                    contents.forEach(content=>{
                        content.style.maxHeight = maxHeight + 'px';
                        content.style.overflow = 'hidden';
                        content.style.position = 'relative';
                    })

                })


            },
            //查询所有的博客信息
            queryAllBlogs(){
                if (this.queryLabelId!=0){
                    this.pageIndex=1;
                }
                this.request.get("/index/blog/queryAllBlogs",{
                    params:{
                        auditStatue: 1,
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                        queryTitleLike:this.queryTitleLike,
                        queryLabelId: this.queryLabelId==0?"":this.queryLabelId,
                    }
                }).then(res => {
                    if (res.code=='200'){
                        this.allBlogs=res.data.blogs;
                        this.totalBlogNum=res.data.totalBlogNum;

                    }
                })
            },
            //条件模糊查询博客
            queryByCondition(){
                this.queryAllBlogs();
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryAllBlogs();
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryAllBlogs();
            },
            //展示所有的标签的弹窗
            toShowAllLabelsDialog(dialogBlogInfo){
                this.dialogBlogLabels=dialogBlogInfo.labels;
                this.dialogTitle="查看所有标签";
                this.dialogVisible=true;
            },
            //跳转到查看博客界面
            toBlogView(id){
                this.$router.push({
                    path: '/frontFramework/blogView',
                    query: {
                        id: id,
                    }
                })
            },

        }
    }
</script>

<style scoped>


    .blog-card{
        height: 100%;
        width: 300px;
        margin-top: 20px;

    }

    .labelLayout{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content:center;
        flex-direction: row;
        height: 41px;
        margin-left: 20px;
    }

    .queryInput{
        display: inline-block;
        width: 250px;
        margin-right: 10px;
    }

    /deep/ .el-card__header{
        height: 78px;
    }

    .myTag{
        cursor: pointer;
        min-width: 46px;
        margin: 0 0 0 5px;
        width: 100%;
        text-align: center;
    }

    /*超过两行省略号*/
    .twoLine{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 15px;
        line-height: 20px;
    }

    .input-card{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .page-card{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>
